<template>
    <div class="app-container">
        <div class="app-main">
            <div class="left">
                <el-tree :default-checked-keys="defaultCheckedKeys" default-expand-all :expand-on-click-node="false"
                    :data="appType" :props="defaultProps" @node-click="handleNodeClick">
                    <template #default="{ node, data }">
                        <span class="custom-tree-node" @click="gettt(node, data)">
                            <el-icon color="red" v-if="!node.isCurrent">
                                <Folder />
                            </el-icon>
                            <el-icon color="red" v-else>
                                <FolderOpened />
                            </el-icon>
                            <span style="padding-left: 4px;">{{ node.label }}</span>
                            <span>{{ gettt(node, data) }}</span>
                        </span>
                    </template>
                </el-tree>
            </div>
            <div class="right">
                <div class="app-item" v-for="(app, index) in data" :key="index">
                    <div class="app-item-img">
                        <img :src="app.jzgApplyVo.applyLogo" alt="">
                    </div>
                    <div class="app-item-content">
                        <div class="app-item-content-title">
                            <div class="title">{{ app.jzgApplyVo.applyName }}</div>
                            <div class="status">已购买</div>
                        </div>
                        <div class="app-item-content-des">{{ app.jzgApplyVo.applyDescription }}</div>
                        <div class="app-item-content-bottom">
                            <el-button type="danger">打开</el-button>
                            <div class="expire">有效期： {{ getTime(app.applyValidUntil) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import addForm from './modules/addForm.vue';
import listMixin from '@/mixins/listMixin';
import ImagePreview from '@/components/ImagePreview/index.vue';
import moment from 'moment';
export default {
    name: "application",
    dicts: ["inventory_status", "counting_method"],
    components: {
        addForm, ImagePreview
    },
    mixins: [listMixin],
    data() {
        return {
            app_type: [],
            appType: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            queryParams: {
                orderNo: '',
                pageNum: 1,
                pageSize: 1000,
                applyType: '全部'
            },
            urls: {
                list: '/order/applyBuyRecord/list',
                delete: '/order/applyBuyRecord',
            },
            defaultCheckedKeys: ['全部'],
            data: []
        };
    },
    created() {
        this.getDicts(['app_type']);
    },
    watch: {
        app_type(newValue, oldValue) {
            this.appType = [{
                label: '全部',
                value: '全部',
                children: newValue
            }]
        },
        'queryParams.applyType'(newValue, oldValue) {
            console.log('666 :>> ', 666);
            if (newValue === '全部') {
                this.data = this.dataSource
                return
            }
            this.data = this.dataSource.filter(item => item.jzgApplyVo.applyType === newValue)
        },
        dataSource(newValue, oldValue) {
            if (this.queryParams.applyType === '全部') {
                this.data = newValue
            } else {
                this.data = newValue.filter(item => item.jzgApplyVo.applyType === this.queryParams.applyType)
            }
        }
    },
    methods: {
        name() {

        },
        getTime(time) {
            if (!time) {
                return ''
            }
            return moment(time).format('YYYY-MM-DD')
        },
        gettt(node, data) {
            // console.log('node :>> ', node);
            // console.log('data :>> ', data);
        },
        handleNodeClick(node) {
            this.queryParams.applyType = node.value
        },
    },
};
</script>
<style lang="scss" type="text/css" scoped>
.app-main {
    display: flex;
    background-color: #f0f4fa;
}

.left {
    width: 200px;
    height: 100%;
    min-height: calc(100vh - 130px);
    border-right: 1px solid #ebeef5;
    padding: 20px;
}

.right {
    flex: 1;
    padding: 20px;

    .app-item {
        display: flex;
        margin-bottom: 20px;
        width: 400px;
        border-radius: 8px;
        border: 1px solid #ebeef5;
        padding: 10px;

        .app-item-img {
            width: 108px;
            height: 108px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 16px;
            }
        }

        .app-item-content {
            flex: 1;
            padding-left: 20px;

            .app-item-content-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;

                .title {
                    font-size: 16px;
                    color: #303133;
                    font-weight: bold;
                }

                .status {
                    font-size: 14px;
                    color: #F46011;
                }
            }

            .app-item-content-des {
                margin-bottom: 10px;
                // 4行超出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 14px;
                color: #606266;

            }

            .app-item-content-bottom {
                display: flex;
                align-items: center;

                .expire {
                    flex: 1;
                    color: #606266;
                    margin-left: 20px;
                    font-size: 14px;
                }
            }
        }
    }
}</style>